<template>
  <div class="delivery">
    <el-row class="search">
      <el-col :span="8">
        <el-input v-model="orderId" @keyup.enter.native="load" placeholder="订单编号"></el-input>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%" :row-style="rowStyle">
      <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
      <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
      <el-table-column align="center" prop="spuName" label="商品名" width="150"></el-table-column>
      <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
      <el-table-column align="center" prop="user.username" label="下单人" width="100">
        <template slot-scope="scope">
          <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
            <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
              <el-tag size="large">{{ scope.row.user.username }} </el-tag>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="linkUser" label="收货人" width="100">
        <template slot-scope="scope">
          <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
            <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
              <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
        <template slot-scope="scope">
          <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
            {{ scope.row.linkAddress }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column align="center" prop="updateTime" label="更新时间" width="200"></el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="preReceive(scope.row.id)">确认送达</el-button>
          <el-button type="success" size="small" @click="showDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-size="pageSize" :page-sizes="[2, 5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="showDialog" width="50%" center>
      <!-- 下单人联系方式 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">下单人信息</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="6">
            下单人Id: {{ orderVO.user?.id }}
          </el-col>
          <el-col :span="6">
            下单人: {{ orderVO.user?.nickName }}
          </el-col>
          <el-col :span="6">
            联系电话: {{ orderVO.user?.phone }}
          </el-col>
          <el-col :span="6">
            邮箱: {{ orderVO.user?.email }}
          </el-col>
        </el-row>
      </el-card>

      <!-- 收货人联系方式 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong>收货人信息</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="8">
            收货人: {{ orderVO?.linkUser }}
          </el-col>
          <el-col :span="8">
            联系电话: {{ orderVO?.linkPhone }}
          </el-col>
          <el-col :span="8">
            送货地址: {{ orderVO?.linkAddress }}
          </el-col>
        </el-row>
      </el-card>

      <!-- 订单详情 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">订单明细</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="8">
            订单编号: <el-tag type="primary" size="large">{{ orderVO?.id }}</el-tag>
          </el-col>
          <el-col :span="12">
            商品名称: <el-tag type="success" size="large">{{ orderVO?.spuName }}</el-tag>
          </el-col>
          <el-col :span="4">
            商品数量: <el-tag>{{ orderVO?.count }}</el-tag>
          </el-col>
        </el-row>
        <!-- 订单状态 -->
        <el-row>
          <el-col :span="8">
            订单状态: <el-tag type="success" size="large" v-if="orderVO?.state >= 1">{{ orderVO?.stateName }}</el-tag>
            <el-tag type="warning" size="large" v-else>{{ orderVO?.stateName }}</el-tag>
          </el-col>
          <el-col :span="8">
            下单时间: <el-tag type="primary" size="large">{{ orderVO?.unpaidTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            支付时间: <el-tag type="primary" size="large" v-show="orderVO?.state >= 1">{{ orderVO?.preDeliveryTime
              }}</el-tag>
          </el-col>
          <el-col :span="8">
            发货时间: <el-tag type="primary" size="large">{{ orderVO?.deliveryTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            到达时间: <el-tag type="primary" size="large" v-if="orderVO?.state >= 3">{{ orderVO?.preReceiveTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            完成时间: <el-tag type="success" size="large" v-if="orderVO?.state >= 4">{{ orderVO?.receiveTime }}</el-tag>
          </el-col>
        </el-row>

        <el-card shadow="never">
          <template #header>
            <div style="display: flex; justify-content: center; align-items: center;">
              <strong>商品详情</strong>
            </div>
          </template>
          <el-tag type="primary">{{ orderVO?.detail?.size }}</el-tag>
          <el-tag type="primary">{{ orderVO?.detail?.color }}</el-tag>
        </el-card>
        <!-- 订单价格 -->
        <el-row class="info" style="">
          <el-col :span="6">
            单价: <el-tag type="primary" size="large">{{ orderVO?.price }}</el-tag>￥/双
          </el-col>
          <el-col :span="6">
            总价格: <el-tag type="primary" size="large">{{ orderVO?.totalPrice }}</el-tag>￥
          </el-col>
          <el-col :span="6">
            实际售价: <el-tag type="success" size="large">{{ orderVO?.salePrice }}</el-tag>￥/双
          </el-col>
          <el-col :span="6">
            实际付款: <el-tag type="success" size="large">{{ orderVO?.payPrice }}</el-tag>￥
          </el-col>
          <el-col :span="6">
            付款方式: <el-tag type="warning " size="large" v-if="orderVO?.state >= 1">{{ orderVO?.payMethod }}</el-tag>
          </el-col>
        </el-row>
      </el-card>

      <template #footer>
        <el-button type="success" @click="showDialog = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { getUser } from "@/utils/storage";
import { sOrderCount, sOrderPage, sOrderPreReceive } from "../../api/sOrder";
export default {
  name: "DeliveryOrder",
  data() {
    return {
      orderVO: {},
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      orderId: '',
      startTime: null,
      endTime: null,
      state: 2,
      userId: '',
      countMap: [],
      showDialog: false, //详情抽屉
      // 状态与颜色的映射
      stateColors: {
        '-1': '#eea193',
        '-2': '#eea193',
        // '0': '#f2e8e8',
        // '1': '#d6daec',
        // '2': '#ecebbc',
        // '3': '#eec792',
        '4': '#99eba1',
        '5': '#99eba1'
      }
    };
  },
  created() {
    // this.user = getUser()
    this.load()
    console.log('delivery')
  },
  methods: {
    // 主函数
    async load() {
      const { data } = await sOrderPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orderId: this.orderId,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        userId: this.userId
      })
      this.tableData = data?.records
      this.pageNum = Number(data?.current)
      this.total = Number(data?.total) | 0
      const { data: countMap } = await sOrderCount()
      this.countMap = countMap
      console.log(this.tableData)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    async showDetail(orderVO) {
      this.orderVO = JSON.parse(JSON.stringify(orderVO))
      const detail = JSON.parse(this.orderVO.detail)
      this.orderVO.detail = {size:detail.size,color:detail.color}
      this.showDialog = true
    },
    reset() {
      this.pageNum = 1,
        this.pageSize = 5,
        this.total = 0,
        this.orderId = ''
      this.startTime = null
      this.endTime = null
      this.state = ''
      this.userId = ''
      this.load()
    },
    // 获取订单详情
    async getOrderDetail(orderId) {
      const { data } = await sOrderDetail(orderId)
      this.orderVO = data
      this.showDialog = true
    },
    async preReceive(orderId) {
      this.$confirm('是否确认送达?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await sOrderPreReceive(orderId)
        this.$message.success("确认到达")
        this.load()
        this.showDialog = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      })
    }
    ,
    // 获取订单数量
    rowStyle({ row }) {
      // 根据state值获取对应的颜色
      const color = this.stateColors[String(row.state)];
      return {
        background: color // 如果color不存在，则默认为透明或其他颜色
      }
    }
  },
};
</script>
<style scoped>
.title {
  font-size: 20px;
}

.search {
  /* display: flex;
  justify-content: space-between;
  align-content: center; */
  width: 100%;
}

.search,
.el-input {
  width: 70%;
}

.info {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10px;
}

.card-header-title {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 20px;
}

.el-table {
  margin-top: 10px;
}

.el-table .warning-row {
  background: oldlace;
}
</style>
